<template>
	<view class="tombCert-ification" >
		<!-- 列表 -->
		<view class="history-box" v-for="(item,index) in dataList" :key="index">
			<view class="box-content" >
				<image :src="item.url" ></image>
				<view class="box-msg">
					<view class="msg-sp" >
						姓名：<span>{{item.name}}</span>
					</view>
					<view  class="msg-sp"  >
						摄像头：<span>{{item.num}}</span>
					</view>
					<view class="msg-sp" >
						下葬日期：<span>{{item.time}}</span>
					</view>
					<view class="msg-sp" >
						所在馆区：<span>{{item.area}}</span>
					</view>
				</view>
				<span class="box-btn">{{item.peoples ? '本人选购':'好友选购'}}</span>
			</view>
			<view class="btns-div" >
				<span @click="goTo_tombReal" >墓位实景</span>
				<span @click="goTo_tombSite">查看合同</span>
			</view>
		</view>
		
		<view class="add-btn" >
			<span @click="goTo_tombBinding">十 墓位绑定</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{
						url:'../../../static/uview/common/z_people.png',
						name:'张忠良',
						num:'AZX001',
						time:'2019-03-01',
						area:'金吉镇-B区-1排-20号',
						peoples:true
					},
					{
						url:'../../../static/uview/common/z_people.png',
						name:'王善民',
						num:'AZX001',
						time:'2019-01-20',
						area:'蒼榕镇-C区-1排-20号',
						peoples:false
					}
				]
			};
		},
		
		methods:{
			// 跳转 墓位实景页面
			goTo_tombReal(){
				this.$u.route({
					url:'/pages/view/tombReal/tombReal'
				})
			},
			
			// 跳转 墓位合同页面
			goTo_tombSite(){
				this.$u.route({
					url:'/pages/view/tombSite/tombSite'
				})
			},
			
			// 跳转 墓位绑定页面
			goTo_tombBinding(){
				this.$u.route({
					url:'/pages/view/tombBinding/tombBinding'
				})
			}
		}
	}
</script>

<style lang="less">
.tombCert-ification{
	font-size: 28upx;
	position: relative;
	
	.history-box{
		border-bottom: 2upx solid #e4e4e4;
		position: relative;
		padding:30upx 20upx 30upx 30upx;
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		.box-content{
			display: flex;
			image{
				width: 160upx;
				height: 210upx;
				border: 10upx solid #f9c38c;
			}
			.box-msg{
				flex: 1;
				margin-left: 30upx;
				padding-top: 8upx;
				.msg-sp{
					color: #000000;
					margin-bottom: 16upx;
					span{
						font-weight: bold;
					}
				}
			}
			.box-btn{
				position: absolute;
				top: 18upx;
				right: 0;
				font-size: 28upx;
				color: #ffffff;
				background: #f49b23;
				padding: 4upx 24upx 4upx 28upx;
				border-radius: 40upx 0 0 40upx;
			}
		}
		.btns-div{
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 80upx ;
			margin: 34upx 0 10upx 0;
			span{
				border-radius: 6upx;
				padding: 10upx 14upx;
			}
			span:first-child{
				color: #333333;
				border:2upx solid #837578;
				background: #f3e4e7;
			}
			span:last-child{
				color: #fff0f3;
				background: #f9c38c;
			}
		}
	}
	
	.add-btn{
		text-align: center;
		height: 90upx;
		line-height: 90upx;
		margin-top:50upx;
		margin-bottom: 30upx;
		span{
			font-size: 32upx;
			color: #ffffff;
			background: #f5942b;
			padding: 14upx 74upx;
			border-radius: 6upx;
		}
	}
}
</style>
